<template>
  <div class="add-adress">
    <group>
      <x-address :title="title" v-model="form.areaIdPath" :list="addressData" @on-shadow-change="onShadowChange" placeholder="所在地区" :show.sync="showAddress"></x-address>
      <x-textarea title="详细信息" v-model="form.userAddress" placeholder="请填写详细信息" :show-counter="false" :rows="3"></x-textarea>
      <x-input title="收货人" v-model="form.userName" placeholder="输入真实姓名" type="text"></x-input>
      <x-input title="手机号" v-model="form.userPhone" placeholder="确保真实有效" type="number"></x-input>
      <x-button @click.native="addNew_func()" type="primary" style="margin-top:20px">提交</x-button>
    </group>
    <toast v-model="success_dialog" type="text" text="操作成功"></toast>
  </div>
</template>
<script>
import g from "../../common/js/http.js"
import {
  Group,
  XAddress,
  ChinaAddressV4Data,
  XButton,
  XInput,
  XTextarea,
  Cell,
  CheckIcon,
  Value2nameFilter as value2name
} from "vux"

export default {
  components: {
    Group,
    XAddress,
    XButton,
    Cell,
    XInput,
    XTextarea,
    CheckIcon
  },
  data() {
    return {
      success_dialog: false,
      title: "所在地区",
      value_0_1: [],
      value: ["210000", "210100", "210102"],
      title2: "设置值",
      value2: ["天津市", "市辖区", "和平区"],
      value3: ["广东省", "中山市", "--"],
      addressData: ChinaAddressV4Data,
      value4: [],
      value5: ["广东省", "深圳 市", "南山区"],
      showAddress: false,
      demo1: false,
      form: {
        areaIdPath: ["210000", "210100", "210102"],
        userAddress: "",
        userName: "",
        userPhone: ""
      }
    }
  },
  methods: {
    doShowAddress() {
      this.showAddress = true
      setTimeout(() => {
        this.showAddress = false
      }, 2000)
    },
    onShadowChange(ids, names) {
      console.log(ids, names)
    },
    getName(value) {
      return value2name(value, ChinaAddressV4Data)
    },
    addNew_func() {
      var form_data = this.form
      var addPath = form_data.areaIdPath
      var areaId = addPath[2]
      if (
        this.form.userAddress == "" ||
        this.form.userName == "" ||
        this.form.userPhone == ""
      ) {
        alert("请完善表单字段再提交")
        return
      }
      var areaIdPath_str = addPath[0] + "_" + addPath[1] + "_" + addPath[2]
      var reqForm = {
        userName: form_data.userName,
        userPhone: form_data.userPhone,
        areaIdPath: areaIdPath_str,
        areaId: areaId,
        userAddress: form_data.userAddress
      }
      var _this = this
      g.post_func("/api/v1/staff/nwe_adress", reqForm, function(data) {
        console.log(data)
        if (data.code == 200) {
          _this.success_dialog = true
          setTimeout(() => {
            _this.$router.back(-1)
          }, 500)
        }
      })
    }
  }
}
</script>
